﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>3.绝对定位position:absolute</title>
    <script>
        //absolute是position中的第三个属性值，如果你给元素指定了absolute，整个元素就会漂出文档流，而且元素自身的物理空间也同时消失了。不像“relative”还具有原先的物理空间。

        // 我们来看一个实例,在div-1a元素上进行绝对定位：
        // 此时元素“div-1a”不在当初的文档流中，而且其此时定位也是相对于html来进行定位，那么我们有时候并不是需要这样的效果，哪果我们元素div-1a还想在div-1是进行绝对定位，那要怎么办呢？此时就要发挥前面第二步的“relative”作用了。
    </script>
    <style>
        #example {
            float: right;
        }

            #example p {
                margin: 0 0.25em;
                padding: 0.25em 0;
            }

        #div-before,
        #div-after {
            background-color: #88d;
            color: #000;
        }

        #div-1 {
            width: 400px;
            background-color: #000;
            color: #fff;
        }

        #div-1-padding {
            padding: 10px;
        }

        #div-1a {
            background-color: #d33;
            color: #fff;
        }

        #div-1b {
            background-color: #3d3;
            color: #fff;
        }

        #div-1c {
            background-color: #33d;
            color: #fff;
        }
        #div-1a {
				position:absolute;
				top:0;
				right:0;
				width:200px;
			}
    </style>
</head>
<body>
    <div id="example">
        <div id="div-before">
            <p>id = div-before</p>
        </div>
        <div id="div-1">
            <div id="div-1-padding">
                <p>id = div-1</p>
                <div id="div-1a">
                    <p>id = div-1a</p>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
                </div>
                <div id="div-1b">
                    <p>id = div-1b</p>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
                </div>
                <div id="div-1c">
                    <p>id = div-1c</p>
                </div>
            </div>
        </div>
        <div id="div-after">
            <p>id = div-after</p>
        </div>
    </div>
</body>
</html>